/* eslint no-mixed-operators:0 */
import React, { Component } from 'react';
import { Table, Progress, Pagination } from '@icedesign/base';
import IceContainer from '@icedesign/container';
import { TaskService } from '../../../../services'

export default class ProgressTable extends Component {
  static displayName = 'ProgressTable';

  constructor(props) {
    super(props);
    this.state = {
      pageIndex : 1,
      pageSize : 10,
    };
  }

  componentDidMount = () =>{ this.loadData(this.state.pageIndex) }

  loadData = async(page) =>{
    this.setState({loading : true})
    let data = await TaskService.getPage(page, this.state.pageSize)
    this.setState({
      pageIndex : data.pageIndex,
      pageSize : data.pageSize,
      total : data.total,
      dataSource : data.datas,
      loading : false
    })
  }

  changePage = (page) =>{ this.loadData(page) }

  renderCellProgress = (value, index, record) => {
    return (<Progress showInfo={false} percent={(record.flishnum / record.adnum) * 100} />)
  }

  render() {
    return (
      <div className="progress-table">
        <IceContainer className="tab-card">
          <Table getRowClassName={(record, index) => { return `progress-table-tr progress-table-tr${index}`; }} dataSource={this.state.dataSource}>
            <Table.Column title="名称" dataIndex="name" width={200} />
            <Table.Column title="渠道" dataIndex="channelName" width={200} />
            <Table.Column title="推送总数量" dataIndex="adnum" width={200} />
            <Table.Column title="推送成功数量" dataIndex="flishnum" width={100} />
            <Table.Column title="进度" cell={this.renderCellProgress} width={200}/>
          </Table>
          <div style={styles.paginationWrapper}>
            <Pagination onChange={this.changePage} total={this.state.total} pageSize={this.state.pageSize}/>
          </div>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  paginationWrapper: {
    display: 'flex',
    padding: '20px 0 0 0',
    flexDirection: 'row-reverse',
  },
};
